<!DOCTYPE html>
<!-- 声明html5标准 -->
<html lang='zh'>
<!-- 这个主要是给搜索引擎看的，搜索引擎不会去判断该站点是中文站还是英文站，所以这句话就是让搜索引擎知道，你的站点是中文站
对html页面本身不会有影响,这些现在都是html规范，你的页面越规范，就越容易被收录 -->

<head>
    <meta charset='UTF-8'>
    <!-- 声明使用UTF-8 Unicode编码，UTF-8编码优先采用的编码 -->
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <!--  X-UA-Compatible是针对IE新加的一个设置 声明兼容到edge -->
    <meta name='viewport' content='width=device-width, initial-scale=no'>
    <!--width:可视区域的宽度，值可为数字或关键词device-width intial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放 -->
    <title>Document</title>
    <!-- 引入vue.js -->
    <link rel="stylesheet" href="./lib/bootstrap-3.3.7.css">

    <script src='./js/vue.js'></script>
    <style>
        [v-clock] {
            display: none;
        }
    </style>
</head>

<body>
    <div id='root'>
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">添加品牌</h3>
            </div>
            <div class="panel-body ">
                <form class="form-inline" role="form">
                    <div class="row">
                        <div class="col-lg-2">
                            id: <input type="text" class="form-control" v-model="idValue">
                        </div>
                        <div class="col-lg-3">
                            Name: <input type="text" class="form-control" v-model="nameValue">
                        </div>
                        <button class="col-lg-1 btn btn-primary" @click.prevent="addMessage">添加</button>
                        <div class="col-lg-4">
                            搜索名称关键字: <input type="text" class="form-control" v-model="keyWords" @keyup="searchValue">
                        </div>
                    </div>
                </form>

            </div>
        </div>
        <table class="table table-hover" v-clock>
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Name</th>
                    <th>CreateTime</th>
                    <th>Operation</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,index) in searchValue()" :key="index">
                    <td>{{item.id |format1}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.createTime | format("yyyy-mm/dd hh:tt:ss")}}</td>
                    <td><a href="" @click.prevent="deleteMessage(item)">删除</a></td>
                </tr>
            </tbody>
        </table>

    </div>
    <div id="app">
        <div>
            {{text | format}}
        </div>
    </div>
    <script>
        // 1:全局的过滤器可以供所有的vue实例使用
        // 2:而私有只能用在当前vue实例中
        Vue.filter("format", function (data, param) {
            // padStart()
            console.log(param)
            // 第一个参数为要显示的个数.第二个参数为如果位数不够要前面补充什么
            // 注意事项: padstart()为字符串的方法 
            // padStart S要注意大写
            // padEnd()
            // 第一个参数为要显示的个数.第二个参数为如果位数不够要在后面补充什么
            let dateObj = new Date(data);
            console.log(new Date(data));
            // 数字转字符串, 
            let year = dateObj.getFullYear();
            let month = (dateObj.getMonth() + 1).toString().padStart(2, "0");
            // getDay是一个星期中第几天 
            let day = (dateObj.getDate()).toString().padStart(2, "0");
            let hour = dateObj.getHours().toString().padStart(2, "0");
            let minutes = dateObj.getMinutes().toString().padStart(2, "0");
            let seconds = dateObj.getSeconds().toString().padStart(2, "0");
            return param.replace('yyyy', year).replace("mm", month)
                .replace('dd', day).replace('hh', hour).replace('tt', minutes).replace("ss", seconds)
        })
        let vue = new Vue({
            // 选择控制区域,通过选择器去选到他，工作中一般使用id选择器;
            el: '#root',
            // 数据储存位置
            data: {
                list: [{ id: 1006, name: "宝马", createTime: "Wed Dec 08 2021 15:00:52 GMT+0800 (中国标准时间)" },
                { id: 20312, name: "思域", createTime: "Wed Dec 08 2021 15:01:49 GMT+0800 (中国标准时间)" },
                { id: 3120, name: "雅阁", createTime: new Date() }],
                idValue: "",
                nameValue: "",
                keyWords: '' //搜索的内容
            },
            // 方法的储存位置
            methods: {
                // 添加数据
                addMessage() {
                    // 添加格式需要和上面的格式保持一致
                    // this.list
                    // 判断id不能重复. 
                    if (this.idValue != "" && this.nameValue != "" && !this.list.some(item => item.id == this.idValue)) {
                        let obj = { id: this.idValue, name: this.nameValue, createTime: new Date() }
                        this.list.unshift(obj)
                    } else {
                        alert('填入信息后点击添加')
                    }
                },
                deleteMessage(item) {
                    // 1. 普通写法
                    // this.list.forEach((value,index) => {
                    //     // id是不重复的. 
                    //     if (value.id == item.id) {
                    //         this.list.splice(index,1)
                    //     }
                    // })
                    // 2:es6写法
                    this.list = this.list.filter(value => !(value.id == item.id))
                    this.list = this.list.filter(value => {
                        return !(value.id == item.id)
                    })
                    // console.log(this.list.filter(item=>this.list.some(value=>(value.id!==item.id))))
                    // console.log(this.list.some(value=>value.id==item.id))
                    // console.log(index)
                    // 数组删除元素的方法.  pop固定删除最后一个元素
                    // this.list.delete(index)
                    // splice 删除原数组里面的某一个或多个元素,  他有两个参数 第一个参数是删除的位置的位置,第二个删除的格式.
                    // this.list.splice(item.id, 1);
                },
                searchValue() {
                    console.log("11")
                    // 方法1
                    let newList = [];
                    // console.log(this.keyWords)
                    // 1  确定事件  
                    // 2：newList到底是干什么的？
                    this.list.forEach((item, index) => {
                        if (item.name.includes(this.keyWords)) {
                            // 添加每一项. 
                            newList.push(item);
                        }
                    })
                    return newList
                    // 方法2 利用filter函数 

                    return this.list.filter(item => item.name.includes(this.keyWords))
                }
            },
            filters: {
                format1(data, param) {
                    return data + "123456789"
                }
            }

        })

        new Vue({
            el: "#app",
            data: {
                text: "周日咱们补课"
            },
            methods: {},
        })
    </script>
</body>

</html>